<template>
  <div id="Step2">
    <van-cell-group>
      <section class="c-avatar">
        <label class="c-avatar__label">头像</label>
        <i class="iconfont icon-touxiang"></i>
      </section>
      <van-field
        input-align="right"
        label="姓名"
        placeholder="请输入"
      />
      <van-cell @click="showPop=true" title="性别" is-link/>
      <van-field
        input-align="right"
        label="年龄"
        placeholder="请输入"
      />
      <van-field
        input-align="right"
        label="身份证号码"
        placeholder="请输入"
      />
      <van-cell @click="showPop=true" title="籍贯" is-link/>
      <van-cell @click="showPop=true" title="当前所在地" is-link/>
      <van-field
        input-align="right"
        label="详细地址"
        placeholder="请输入"
      />
    </van-cell-group>
    <van-popup :show="showPop" position="bottom"
               @close="showPop=false">
      <van-picker :columns="columns" @change="onChange"/>
    </van-popup>
  </div>

</template>

<script>
  export default {
    name: "Step2",
    data() {
      return {
        showPop: false,
        columns: ["男", "女"]
      }
    },
    methods: {},
    computed: {},
    created() {
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/common";

  #Step2 {
    .c-avatar {
      @include flex-between;
      border-bottom: 1Px solid #ebedf0;
      margin: 0 15px;
      color: #323233;
      font-size: 14px;
      padding: 6px 0;
      .icon-touxiang {
        font-size: 50px;
        color: #969799;
      }
    }
  }
</style>
